import { List, Checkbox, Tag, Toast } from 'antd-mobile'
import { EditSOutline } from 'antd-mobile-icons'
import styles from '../css/psg.module.css'
import { useNavigate, useSearchParams } from 'react-router-dom'

// p_type    成人票、儿童票、学生票
// 对应颜色  default success warning
const colorMap = {
  成人票: 'default',
  儿童票: 'success',
  学生票: 'warning'
}

function PsgCardItem(props) {
  const [sp] = useSearchParams()
  const nav = useNavigate()

  return (
    <List.Item
      description={
        <span className={styles.idcard}>身份证：{props.card_no}</span>
      }
      // 修改的小图标
      prefix={
        <EditSOutline
          onClick={() => {
            // 不允许修改 id 为 1-7 的数据
            if (props.id <= 7) return Toast.show('不允许修改！')
            // 跳转到修改页面，把数据带过去
            nav('/psg-add', {
              state: {
                c_type: props.c_type,
                card_no: props.card_no,
                id: props.id,
                name: props.name,
                p_type: props.p_type,
                phone: props.phone
              }
            })
          }}
        />
      }
      extra={
        sp.get('mode') === 'choose' && (
          <Checkbox
            // 步骤1：改造复选框，添加 value 属性
            value={{
              name: props.name,
              idcard: props.card_no,
              ticketType: props.p_type
            }}
          />
        )
      }
    >
      <div className={styles.username}>
        <span className={styles.name}>{props.name}</span>
        <Tag
          color={colorMap[props.p_type]}
          fill="outline"
        >
          {props.p_type}
        </Tag>
      </div>
    </List.Item>
  )
}

export default PsgCardItem
